<template>
    <div class="page-chat">
        <chat-list :list="chatList" :heUser="heUser" @onSend="onSend" @showMap="showMap">
            <div ref="gd"></div>
        </chat-list>
        <chat-map :isMap="isMap" @onBack="onBack" @onSend="onSend"></chat-map>
    </div>
</template>

<script>
import ChatList from '../components/Chat/Index'
import ChatMap from '../components/Chat/Map'
export default {
    name: 'PageChat',
    components: {
        ChatList,
        ChatMap
    },
    data() {
        return {
            isMap: false
        }
    },
    methods: {
        getUser() {
            var obj = {
                type: 'user',
                id: this.$route.params.id,
                fromId: this.$store.state.userInfo.id,
                token: this.$store.state.userInfo.token
            }
            var data = JSON.stringify(obj);
            this.ws.send(data);
        },
        onSend(e,i) {
            var obj = {
                type: 'say',
                id: this.$route.params.id,
                fromId: this.$store.state.userInfo.id,
                token: this.$store.state.userInfo.token,
                msg: e,
                msgType: i,
                status: 0
            }
            var data = JSON.stringify(obj);
            this.ws.send(data);
            var list = {
                from: 'me',
                msg: e,
                msg_type: i
            }
            this.$store.commit('pushChatList',list)
            this.bottom()
        },
        showMap() {
            this.isMap = true
        },
        onBack() {
            this.isMap = false
        },
        bottom(){
            setTimeout(
                this.$nextTick(()=>{
                    this.$refs.gd.scrollIntoView()
                }),200
            )
        },
    },
    computed:{
        chatList() {
            this.bottom()
            return this.$store.state.chatList
        },
        heUser() {
            return this.$store.state.heUser
        }
    },
    created() {
        this.getUser()
    },
    updated(){
        // 聊天定位到底部
        setTimeout(
            this.$nextTick(()=>{
                this.$refs.gd.scrollIntoView()
            }),200
        )
    },
}
</script>

<style lang="scss" scoped>
.page-chat{
    width:100vw;
    height:100vh;
}
</style>